<template>
	<view class="page_box">
		<u-navbar :is-back="false" title="大家养多多养老年金" v-if="1" :border-bottom="false"></u-navbar>
		<view class="content_box">
			<view class="ww100 h580">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605100849.png"
					mode="aspectFill"
					class="ww100 h580"
				></image>
			</view>
			<view class="ww100 h276 u-relative">
				<text class=" text-black f50 text-bold mt30 ml50 block">信泰超级玛丽4号重疾险</text>
				<view class="img bg-img w143 h148 flex align-end justify-center">
					<text class="f38 text-white mb10">海报</text>
				</view>
			</view>
			<view class="h25 hen"></view>
			<view class="flex justify-between padding solid-bottom" @click="showtime = !showtime">
				<text class="f54 text-gray">投保人出生日期</text>
				<view class="flex align-center">
					<text class="f54 text-black text-bold ">1990-06-30</text>
					<i class="cuIcon-right text-gray f54"></i>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom" @click="showtime = !showtime">
				<text class="f54 text-gray">投保人出生日期</text>
				<view class="flex align-center">
					<text class="f54 text-black text-bold ">1990-06-30</text>
					<i class="cuIcon-right text-gray f54"></i>
				</view>
			</view>

			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">被保人性别</text>
				<view class="flex align-center">
					<text class="cu-tag f50 bg-gray light radius mr50 r15">男</text>
					<text class="cu-tag f50 bg-gray light radius r15 red">女</text>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">版本</text>
				<view class="flex align-center">
					<text class="cu-tag f50 bg-gray light radius mr50 r15">保证领取版</text>
					<text class="cu-tag f50 bg-gray light radius r15 red">高领取版</text>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">保障时间</text>
				<view class="flex align-center"><text class="text-grya f50">终身</text></view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">首次领取时间</text>
				<view class="flex align-center">
					<text class="cu-tag f50 bg-gray light radius r15 red">自65岁</text>
					<text class="cu-tag f50 bg-gray light radius r15">自60岁</text>
					<text class="cu-tag f50  light radius r15">自55岁</text>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">领取方式</text>
				<view class="flex align-center">
					<text class="cu-tag f50 bg-gray light radius r15 red">按月</text>
					<text class="cu-tag f50 bg-gray light radius r15">按年</text>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray  ">交费年限</text>
				<view class="flex align-center f-1 ww20 flex-wrap justify-end">
					<text class="cu-tag f50 bg-gray light radius r15 red">20年</text>
					<text class="cu-tag f50 bg-gray light radius r15">15年</text>
					<text class="cu-tag f50 bg-gray light radius r15">10年</text>
					<text class="cu-tag f50 bg-gray light radius r15">5年</text>
					<text class="cu-tag f50 bg-gray light radius r15">2年</text>
					<text class="cu-tag f50 bg-gray light radius r15 mt20 ">一次性交情</text>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">交费方式</text>
				<view class="flex align-center">
					<text class="cu-tag f50 bg-gray light radius r15  red">月交（自动续费）</text>
					<text class="cu-tag f50 bg-gray light radius r15">年交</text>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">交费金额</text>
				<view class="flex flex-direction align-end">
					<view class="pay bg-img flex align-center justify-between">
						<view
							class="w56 h56 round flex align-center justify-center text-white  ml20 cu-progress "
							style="background: #FDB4AD; ;"
						>
							-
						</view>
						<view class="flex align-center input justify-end">
							<input type="text" value="500" />
							<text class="text-black f50">元</text>
						</view>
						<view
							class="w56 h56 round flex align-center justify-center text-white bg-red mr20 cu-progress "
							style=";"
						>
							+
						</view>
					</view>
					<view class="flex align-center mt20">
						<text class="cu-tag f50 bg-gray light radius r15">500元</text>
						<text class="cu-tag f50 bg-gray light radius r15">500元</text>
						<text class="cu-tag f50 bg-gray light radius r15">500元</text>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding solid-bottom">
				<text class="f54 text-gray">投保人意外身故全残豁免</text>
				<view class="flex align-center">
					<text class="cu-tag f50 bg-gray light radius r15 red">不投保</text>
					<text class="cu-tag f50 bg-gray light radius r15">投保</text>
				</view>
			</view>
			<view class="padding">
				<view class="flex justify-end" @click="showdmoTbl = !showdmoTbl">
					<view class="cu-tag  light round bg-red" style="">
						<text class="f30">利益演示</text>
						<i class="cuIcon-right text-right ml20 f30"></i>
					</view>
				</view>
				<view class="flex justify-center mt40 mb40">
					<text class="text-black text-bold f50">
						到
						<text class="text-red">65</text>
						周岁时累计可领取年金（元）
					</text>
				</view>
				<view class="flex flex-direction align-center">
					<text class="text-bold text-red f75 mb140">{{ amt }}</text>
					<view class="content ">
						<!-- <view>{{ scrollLeftNow }}</view> -->
						<scroll-choose
							@scroll="scroll"
							:scrollStart="scrollStart"
							:scrollEnd="scrollEnd"
							:scrollLeft="scrollLeft"
							:maginL="maginL"
						></scroll-choose>
					</view>
				</view>
				<view class="f47 flex justify-center align-center text-red ">
					<text>按现金价值演示</text>
					<text
						@click="showdmo = !showdmo"
						class="w125 h64 ml30 block round cu-progress flex align-center justify-center bg-white text-red"
						style="border: 1.2rpx solid #FB4F4F;"
					>
						切换
					</text>
				</view>
				<view class="flex flex-direction align-center mt40">
					<text class="f45 text-black">
						累计投入金额
						<text class="f45  text-red">{{ t1 }}</text>
						元
					</text>
					<text class="f45 text-black">
						每年生存可领取
						<text class="f45  text-red">{{ t2 }}</text>
						元
					</text>
					<text class="f45 text-black">
						计可领取年金/累计投入金额
						<text class="f45  text-red">=0.14</text>
						倍（截至
						<text class="f45  text-red">{{ t3 }}</text>
						岁)
					</text>
				</view>
			</view>
			<view class="pt20 pr24 pb90 pl6">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">产品案例演示</text>
					</view>
				</view>
				<view class=" flex justify-center align-center" style="height: 25vh;">
					<view class=" " style="width: 80vw; ">
					    <view class="flex align-center">
					       	<view class="w28 h28 r10 bg-blue u-relative">
					       		<view class="top1 flex flex-direction align-center justify-center">
					       			<text class="f40 text-bold text-black nowrap">30周岁 </text>
					       			<text class="f35 text-gray nowrap">交费起期</text>
					       		</view>
					       		<view class="top2 padding-xs bg-blue r15 flex align-center ">
					       			<view class="w61 h61 round bg-white flex align-center justify-center">
					       				<image src="../../static/123123.png" mode="aspectFill"  style="width: 26.4rpx; height: 22.2rpx;"></image>
					       			</view>
					       			<text class="text-white f35 ml10 block nowrap text-1" >月交500元</text>
					       		</view>
					       	</view>
					       	<view class=" h1 bg-blue ml10 mr10" :style="{'width' : width + 'px'}"></view>
					       	<view class="w28 h28 r10 bg-blue u-relative">
					       		<view class="top1 flex flex-direction align-center justify-center">
					       			<text class="f40 text-bold text-black nowrap">49周岁 </text>
					       			<text class="f35 text-gray nowrap">交费止期</text>
					       		</view>
					       		<view class="top2 padding-xs bg-red r15 flex align-center  ">
					       			<view class="w61 h61 round bg-white  flex align-center justify-center">
					       				<image src="../../static/303.png" mode="aspectFill"  style="width: 26.4rpx; height: 22.2rpx;"></image>
					       			</view>
					       			<text class="text-white f35 ml10 block nowrap text-3" >每年生存</text>
					       		</view>
					       		
					       	</view>
					       	<view class="w250 h1 bg-red ml10 mr10" :style="{'width' : width3 + 'px'}"></view>
					       	<view class="w28 h28 r10 bg-red u-relative">
					       		
					       		<view class="top1 flex flex-direction align-center justify-center">
					       			<text class="f40 text-bold text-black nowrap">65周岁 </text>
					       			<text class="f35 text-gray nowrap"></text>
					       		</view>
					       		<view class="top2 padding-xs bg-red r15 flex align-center  ">
					       			<view class="w61 h61 round bg-white  flex align-center justify-center">
					       				<image src="../../static/303.png" mode="aspectFill"  style="width: 26.4rpx; height: 22.2rpx;"></image>
					       			</view>
					       			<text class="text-white f35 ml10 block nowrap text-2" >每年生存领16747.06元</text>
					       		</view>
					       	</view>
					       	<view class="w250 h1 bg-red ml10 mr10" :style="{'width' : width2 + 'px'}">
					       		
					       	</view>
					       	<view class="w28 h28 r10 bg-red u-relative">
					       		<view class="top1 flex flex-direction align-center justify-center">
					       			<text class="f40 text-bold text-black nowrap">终身 </text>
					       			<text class="f35 text-gray nowrap"></text>
					       		</view>
					       	</view>
					       </view>
					</view>
                     
                        
                 
				
				</view>
			</view>
			<view class="h25 hen"></view>
			<view class="pt77 pr24 pb90 pl6">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">产品说明</text>
					</view>
				</view>
				<view class="solid-bottom">
					<view class="padding  flex  flex-direction">
						<view class="flex align-center ">
							<image src="../../static/mianxing.png" mode="aspectFill" class="w40 h40"></image>
							<text class="f46 text-bold text-black ml20">犹豫期</text>
						</view>
						<view class="flex  flex-direction ml60">
							<text class="f46 text-gray mt30">
								豫期15天，投保当日开始计算。犹豫期内退保退 还已交保费，犹豫期外退保退还保单现金价值。
							</text>
						</view>
					</view>
					<view class="padding  flex  flex-direction">
						<view class="flex align-center ">
							<image src="../../static/mianxing.png" mode="aspectFill" class="w40 h40"></image>
							<text class="f46 text-bold text-black ml20">注意事项</text>
						</view>
						<view class="flex  flex-direction ml60">
							<text class="f46 text-gray mt30">
								上演示假设投保人按约定方式交费，中途未中断，
								且未发生过加保或者减保。最终保险利益以合同条 款为准。
							</text>
						</view>
					</view>
				</view>
				<view class="padding">
					<view class="pl60 pr60 flex flex-direction">
						<view class="flex">
							<text class="f35 text-black">更多请查看</text>
							<text class="f35 text-red" @click="showPopup = !showPopup">《投保须知》、</text>
							<text class="f35 text-red" @click="showPopupIns = !showPopupIns">《保险条款》、</text>
							<text class="f35 text-red" @click="l.to('/pages/index/hlthNotice')">《健康告知》</text>
						</view>
						<view
							class="flex justify-between ww100 align-center mt50"
							@click="showPopupOne = !showPopupOne"
						>
							<text class="cu-tag light bg-red f33 sm">该产品由信泰人寿保险股份有限公司承保</text>
							<i class="text-red cuIcon-right"></i>
						</view>
					</view>
				</view>
			</view>
			<view class="h25 hen"></view>
			<view class="pt77 pr24 pb90 pl6">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">产品介绍</text>
					</view>
				</view>
			</view>
			<view class="imgOne">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101423.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="imgTwo">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605134643.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="imgThree">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605134947.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="imgFour">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605135032.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="imgFive">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605135522.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="imgSix ">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605135542.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="imgSeven ">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605135555.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="imgEight ">
				<image
					src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605135620.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="h25 hen"></view>
			<view class="pt70 pr24 pb90 pl6">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">常见问题</text>
					</view>
				</view>
				<view class="commonProblem padding">
					<view v-for="(item, index) in listThree" :key="index">
						<view class="flex flex-direction f42 mb50">
							<text class="text-red">{{ item.a }}</text>
							<text class="mt20">{{ item.b }}</text>
						</view>
					</view>
				</view>
				<view class="ww100 h122  bg-gray flex align-center justify-center">
					<text class="text-gray">查看更多</text>
					<i class="cuIcon-unfold text-gray ml10"></i>
				</view>
			</view>
			<view class="h25 hen"></view>
			<view class="pt70 pr24 pb90 pl6">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">理赔服务</text>
					</view>
				</view>
				<view class="commonProblem padding">
					<view class="flex justify-between align-center" @click="showPopupOne = !showPopupOne">
						<text class="cu-tag bg-red light sm">该产品由信泰人寿保险股份有限公司承保</text>
						<i class="text-red cuIcon-right"></i>
					</view>

					<view class="flex justify-center mt68 mb88">
						<text class="f42 text-black text-bold">理赔步骤</text>
					</view>
					<view class="flex justify-between align-center">
						<view class="flex flex-direction align-center ">
							<image src="../../static/11111111.png" mode="aspectFill" class="w103 h103 round"></image>
							<text class="f33 text-gray mt35">依据理赔指引报案</text>
						</view>
						<i class="cuIcon-right"></i>
						<view class="flex flex-direction align-center">
							<image src="../../static/11111113.png" mode="aspectFill" class="w103 h103 round"></image>
							<text class="f33 text-gray mt35">准备素材</text>
						</view>
						<i class="cuIcon-right"></i>
						<view class="flex flex-direction align-center">
							<image src="../../static/11111114.png" mode="aspectFill" class="w103 h103 round"></image>
							<text class="f33 text-gray mt35">保险公司审核</text>
						</view>
						<i class="cuIcon-right"></i>
						<view class="flex flex-direction align-center">
							<image src="../../static/11111112.png" mode="aspectFill" class="w103 h103 round"></image>
							<text class="f33 text-gray mt35">进取理赔金</text>
						</view>
					</view>
				</view>
				<view class="flex justify-center mt87 mb107 align-center" @click="l.to('/pages/index/claimsManual')">
					<text
						class="w291 h74 text-red f42 soli round text-center flex align-center justify-center cu-progress bg-white"
					>
						查看理赔手册
					</text>
				</view>
			</view>
			<view class="h50"></view>
			<view class="ww100 h182 align-center footer flex bg-white">
				<view class="left flex flex-direction justify-center align-center">
					<image src="../../static/6363.png" mode="aspectFill" class="w69 h88"></image>
					<text class="f33 text-gray">产品资料</text>
				</view>
				<view class="right f-1 ww100 flex justify-around">
					<view class="flex align-center">
						<text class="f58 text-bold">保费:</text>
						<text class="f58 text-red text-bold">199.5元</text>
						<text class="f58 text-bold">起</text>
					</view>
					<view class="w498 h123 reddx flex justify-around align-center">
						<view class="f50 text-red text-bold f-1 flex justify-center">转给客户</view>
						<view
							class="f50 text-white  bg-red text-bold f-1 flex justify-center h123 line  align-center cu-progress"
							@click="l.to('/pages/index/fillInTheInfo')"
						>
							立即投保
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 保单利益演示表 -->
		<u-popup v-model="showdmoTbl" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="box padding flex flex-direction  ">
				<view class="flex justify-center"><text class="text-bold text-black f53 ">保单利益演示表</text></view>

				<view class="padding">
					<text class="f45 text-blod mt30 mb30 text-black block">
						基于您所选择的投入信息，保单利益详情如下：
					</text>
					<scroll-view scroll-y="true" class="scroll-Tbl">
						<t-table @change="change" class="mt60">
							<t-tr>
								<t-th>保单年份</t-th>
								<t-th>年龄</t-th>
								<t-th>每年领取</t-th>
								<t-th>年金累计领取年金</t-th>
							</t-tr>

							<t-tr v-for="(item, index) in 17" :key="item.id">
								<t-td>{{ index + 1 }}</t-td>
								<t-td>{{ index + 31 }}</t-td>
								<t-td>0.00</t-td>
								<t-td>0.00</t-td>
							</t-tr>
						</t-table>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-picker v-model="showtime" mode="time"></u-picker>
		<!-- 投保提示 -->
		<u-popup v-model="showPopup" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="box padding flex flex-direction align-center ">
				<text class="text-bold text-black f53">投保提示</text>
				<view class="mt30">
					<view class="f42 text-red padding-sm bg-pink text-bold radius" style="background: #FEF3F3;">
						即将进入投保环节，请您详细了解产品责任仔细阅读保险条款
						等有关信息，为保护您的合法权益，您的投保过程将会被记录，
						请知悉。本产品由信泰人寿保险股份有限公司承保。
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll mt50 mb100">
					<view class="f45 text-black">
						<text>
							敬的客广： \n 感谢您通过 有限公司办理保险业 。\n
							为了您的合法权益得到有效保护，按照监管规定的要求，本
							公司履行客户告知义务，现将有关事项告知如下，请您认真阅读 确认知悉以下内容：\n
							、一请您了解我公司基本情况 \n（一）名称： \n（二）地址
							\n（三）业务范围：在全国区域内(港、澳、台除外)代理销售保
							险产品；代理收取保险费；代理相关保险业务的损失勘察和理赔 中国银保监会批准的其他业务。
							\n（四）联系方式： \n（五）我公司为投保人与保险公司订立保险合同提供中介服务，
							根据保险监管部门规定及双方合同约定，依法向保险公司收取 用金。
							\n（六）根据保险监管部门规定，我司高级管理人员在任职前均取
							中国银保监会派出机构核准的任职资格我公司
						</text>
					</view>
				</scroll-view>
				<view class="btn flex justify-center" @click="showPopup = !showPopup">
					<button class="cu-btn bg-red text-white f52 flex justify-center align-center text-bold btn">
						我已确认并了解以上内容
					</button>
				</view>
			</view>
		</u-popup>
		<!-- 保险条款 -->
		<u-popup v-model="showPopupIns" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="box padding flex flex-direction align-center ">
				<text class="text-bold text-black f53 ">信泰如意护保益重大疾病保险条款</text>
			</view>
		</u-popup>
		<!-- 保险公司介绍 -->
		<u-popup v-model="showPopupOne" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="box padding flex flex-direction align-center ">
				<text class="text-bold text-black f53 ">保险公司介绍</text>
				<view class="imagee bg-img ww100 h320  mt50 flex justify-center align-center">
					<image
						src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210607105638.png"
						mode="aspectFill"
						class="w553 h152"
					></image>
				</view>

				<scroll-view scroll-y="true" class="" style=" height: 75%;">
					<view class="f45 text-black mt50">
						<text>
							白年人寿保险股份有限公司于2009年6月3日止式业，忌部
							址大连，是东北地区首家中资寿险法人机构。公司注册资本
							7.948亿元，十年累计实现保费收入超过1400亿元，总资产突
							破千亿元，价值与规模、品质和效益同步提升，连续四年实现
							利，从寿险到资管，健康而快速的发展备受行业瞩目。百年人
							寿坚持价值导向和结构调整，采取多元化销售发展策略，陆续
							立井行发展个险、银行保脸、创新销售、电话销售、顾问行
							销等业务果道，互联网金融和健康管理服务多领域创新发展。
							年间百年人寿已在全国开设21家省级分公司，累计拥有各级
							支机构390余家，全国主要省市战路布局已基本完成，销售 体系日益完姜。 \n
							百年人寿通过“以客户为中心”战略始终致力于为社会大众
							提供优质的保险产品和服务，便捷高效的操作体验，尖端前沿的
							医疗支持，持续升级的特色服务，更好地满足了客户对于保险保
							的全面需求，为超过2000万客户提供寿险保障服务。百年人寿 获人身险公司服务评价A类评级，\n
							标志着服务已经进入行业 凭借优异的市场表现，百年人寿连续被评为行业最具发展
							力和最具成长性的保险公司、最佳保险企业和最佳责任典范公
							同；连续四年荣膺“年度中国价值成长性十佳寿险公司”，公司
							产品创新亮点频出，多项产品获得行业大奖行业地位和品牌知 名度显著提升。
						</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-picker v-model="showdmo" mode="selector" :range="selector"></u-picker>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
import new_file from '../../common/new_file.js'; //树状菜单数据
import scrollChoose from '@/components/scroll-choose/scroll-choose.vue';
export default {
	components: {
		tTable,
		tTh,
		tTr,
		tTd,
		scrollChoose
	},
	data() {
		return {
		
			t1: 120000,
			t2: 16747.06,
			t3: 67,
			width:'57',
			width2:'57',
			width3:'57',
			
			
			amt: 16747 + 60 * 1996,
			showPopup: false,
			showPopupOne: false,
			showPopupIns: false,
			showdmo: false,
			showtime: false,
			scrollLeftNow: 60, //页面显示
			scrollLeft: 60, //初始值
			scrollStart: 60, //滚动区域起始值
			scrollEnd: 200, //滚动区域终止值
			maginL: 5, //线间距
			tableList: [],
			showdmoTbl: false, //保单利益演示表
			field: {
				backgroundColor: '#000'
			},
			selector: ['按身故障金演示', '按现金价值演示'],
			c: 0,
			listThree: [
				{
					a: 'Q:这个产品对被保险人职业有要求吗？',
					b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。'
				},
				{
					a: 'Q:这个产品对被保险人职业有要求吗？',
					b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。'
				}
			]
		};
	},
	mounted (){
		const query = uni.createSelectorQuery().in(this);
		query.select('.text-1').boundingClientRect(data => {
		  console.log("得到布局位置信息" + JSON.stringify(data));
		  console.log("节点离页面顶部的距离为" + data.width);
		  this.width = data.width + 160
		}).exec();
		query.select('.text-2').boundingClientRect(data => {
		  console.log("得到布局位置信息" + JSON.stringify(data));
		  console.log("节点离页面顶部的距离为" + data.width);
		  this.width2 = data.width + 160
		}).exec();
		query.select('.text-3').boundingClientRect(data => {
		  console.log("得到布局位置信息" + JSON.stringify(data));
		  console.log("节点离页面顶部的距离为" + data.width);
		  this.width3 = data.width + 160
		}).exec();
        
	},
	onShow() {
		this.tableList = new_file.tableList;
		
	},
	onLoad(e) {},
	methods: {
		async click(e) {
			console.log('e :>> ', e);
			this.c = e;
		},
		async scroll(e) {
			this.amt = 16747 + Number(e) * 1996;
			this.t1 = Number(e);
			this.t2 = Number(e);
			this.t3 = Number(e);
			// console.log('e :>> ', e);
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
}
/deep/.scroll-Tbl {
	height: 60vh !important;
}
.nowrap {
	white-space: nowrap;
}
.top1 {
	
	position: absolute;
	top: -90rpx;
	left: 50%;
	transform: translateX(-50%);
}
.top2 {
	// width: 120rpx;
	position: absolute;
	bottom: -90rpx;
	left: 20%;
	// transform: translateX(-50%);
}
.box {
	width: 100vw;
	height: 80vh;
	.btn {
		width: 639.15rpx;
		height: 68.07rpx;
	}
	.scroll {
		width: 100%;
		height: 62%;
	}
	.imagee {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210607105218.png);
	}
}
.content_box {
	.img {
		position: absolute;
		right: 0;
		bottom: 6rpx;
		background-image: url(https://i.loli.net/2021/06/04/xpUWTPH1BtlgGo8.png);
	}
	.hen {
		background: #d2d0d0;
	}
	
	.pay {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605142700.png);
		width: 248.19rpx;
		height: 42.16rpx;
		border-radius: 21.08rpx;
	}
	.soli {
		border: 2rpx solid red;
	}
	.input {
		width: 150.72rpx;
		input {
			width: 100.28rpx;
			font-weight: 550;
			font-size: 32.53rpx;
		}
	}

	.footer {
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		border-top: 1rpx solid #9d9d9d;
		.left {
			width: 120.6rpx;
			height: 100%;
			border-right: 0.6rpx solid #9d9d9d;
		}
		.right {
			.reddx {
				border: 0.6rpx solid #e34545;
				border-radius: 36rpx;
				overflow: hidden;
			}
			.line {
				line-height: 67.2rpx;
			}
		}
	}
	@mixin name {
		width: 100vw;
		image {
			width: 100vw;
			height: 100%;
		}
	}
	.imgOne {
		@include name;
		height: 769.95rpx;
		// height:800.95rpx;
	}
	.imgTwo {
		@include name;
		height: 816.26rpx;
	}
	.imgThree {
		@include name;
		height: 795.78rpx;
	}
	.imgFour {
		@include name;
		height: 1095.18rpx;
	}
	.imgFive {
		@include name;
		height: 839.15rpx;
	}
	.imgSix {
		@include name;
		height: 1026.5rpx;
	}
	.imgSeven {
		@include name;
		height: 711.44rpx;
	}
	.imgEight {
		@include name;
		height: 1067.46rpx;
	}
	.imgnine {
		@include name;
		height: 699.6rpx;
	}
	.imgten {
		@include name;
		height: 864.6rpx;
	}
}
</style>
